<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>商城订单页</title>
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/haitao/home.css">
<link rel="stylesheet" type="text/css" href="css/haitao/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="css/haitao/app.css"/>

<script src="js/jquery.min.js" ></script>
<script src="js/common.js" ></script>
</head>

<body>
<div id="prodVm" v-cloak>
  <header class="header mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">确认订单</h1>
  </header>
  <!--header-end-->
<div class="mui-content">
  <ul class="mui-table-view mui-table-view-radio t-line" v-if="wsAddress!=null">
		<a class="orderlink" href="userAddres.html">
			<li class="mui-table-view-cell b-line">
				<p>{{wsAddress.consignee}} {{wsAddress.tel}}</p>
				<p>{{wsAddress.city}}&nbsp;{{wsAddress.address}}</p>
			</li>
		</a>
		<li class="mui-table-view-cell b-line">
			<p>
				<a class="orderlink" href="userAddres.html"><span class="mui-icon mui-icon-compose"></span>编辑收货地址</a>
			</p>
		</li>
	</ul>
	<ul class="mui-table-view mui-table-view-radio t-line" v-if="wsAddress==null">
		<li class="mui-table-view-cell b-line">
			<p>
				<a class="orderlink" onclick="addAdress()"><span class="mui-icon mui-icon-compose"></span>新建收货地址</a>
			</p>
		</li>
	</ul>
	<div class="devider"></div>
	<ul class="mui-table-view mui-table-view t-line" id="OA_task_1">
		<li class="mui-table-view-cell  mui-table-view-cell mui-media b-line" v-for="wsOrderItem in wsOrderItemList">
			<div class=" mui-input-row mui-checkbox mui-left"><input name="checkbox" value="Item 1" type="checkbox"></div>
			<div class="mui-slider-right mui-disabled">
				<a class="mui-btn mui-btn-red">删除</a>
			</div>
			<div class="mui-slider-handle mui-table">
				<a href="javascript:;">
					<img class="mui-order-img aui-ma-d mui-pull-left" v-bind:src="wsOrderItem.thumb">
					<div class="pro-details-tips clearfix">
						<em style="font-size: 30px;">￥{{wsOrderItem.reallyUnitPrice}}</em><span style="padding-left: 3px;">商城专享价</span>
				    <h2 class="pro-details-text-tit">{{wsOrderItem.productTitle}}</h2>
				    <p class="pro-details-text-des">商品：{{wsOrderItem.wsProduct.title}}</p>
          	<p class="pro-details-text-des">规格：{{wsOrderItem.skuSpec}}</p>
	            <div class="pro-number fr">数量：			
	                <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='1000'>
									  <button  class="mui-btn mui-numbox-btn-minus" type="button">-</button>
									  <input onchange="calculatedAmount()" class="mui-numbox-input" type="number" v-bind:value="wsOrderItem.quantity" v-bind:id="wsOrderItem.skuId" v-bind:skuId="wsOrderItem.skuId"  v-bind:reallyUnitPrice="wsOrderItem.reallyUnitPrice"/>
									  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
									</div>
	            </div>
						</p>
					</div>
				</a>
			</div>
		</li>
	</ul>
	
  
  <div class="devider b-line"></div>
	<ul class="mui-table-view ">
		<li class="mui-table-view-cell b-line">配送方式: <span class="mui-pull-right">{{expressWay}}</span></li>
	</ul>
  
</div>
<!--container-end-->
<div style="height:49px"></div>
<nav class="mui-bar mui-bar-tab" style="">
	<div class="t-line aui-on-cell">
		<div class="aui-onc">
			<p style="display:inline-block"><span style="color:#fb4545" id="wsCartMoney"></span></p>
			<a onclick="payOrder()" class="aui-got" style="padding:0 40px">提交订单</a>
		</div>
	</div>
</nav>
</div>
<script src="js/mui.min.js"></script>
<script src="js/wxshop.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
	var skuId;
	var prodId;
	var vm = new Vue({
		el: '#prodVm',
		data: {
			wsOrderItemList: [],
			wsAddress:"",
			expressWay:"",
		},
		created: function () {
			mui.ajax(wxshop.serverUrl+"/order", {
				type: "post",
				data:localStorage.wsCartOrder,
				dataType: "json",
				contentType : "application/json",
				success: function(data) {
					if(data.ret==0){
						mui.alert(data.msg);
					}
					if(data.ret==2){
						wxshop.getOpenId(data.appid);
					}	
					vm.wsOrderItemList=data.wsOrderItemList;
					vm.wsAddress=data.wsAddress;
					vm.expressWay=data.expressWay;
					vm.$nextTick(function () {
							mui.init();
							mui('.mui-numbox').numbox();
							calculatedAmount();
					})
				},
				error: function(xhr,type,errorThrown) {
							mui.alert("后台接口请求失败，请联系管理员！错误"+errorThrown);
				}
			});
		},
	});
	
	//选中之后计算金额
	function calculatedAmount(){
		var wsCartMoney=0;
		$(".mui-numbox-input").each(function(){
			var skuId=$(this).attr("skuId");
			var quantity=$("#"+skuId).val();
			var reallyUnitPrice=$(this).attr("reallyUnitPrice");
			wsCartMoney=wsCartMoney+reallyUnitPrice*quantity;
		});
		$("#wsCartMoney").html("合计：￥"+wsCartMoney+"</br>(不包含运费和优惠活动)");
	}
	//去付款
	function payOrder(){
		if(vm.wsAddress==null || vm.wsAddress.id==null || vm.wsAddress.id==""){
			mui.alert("请选择收货地址");
			return;
		}
		var arrParam=[];
		$(".mui-numbox-input").each(function(){
			var item={};
			item.skuId=$(this).attr("skuId");
			item.quantity=$("#"+item.skuId).val();
			arrParam.push(item);
		});
		if(arrParam.length==0){
			mui.alert("请选择购买商品");
			return;
		}
		localStorage.wsPayOrder = JSON.stringify(arrParam);
		mui.openWindow({
				url:"payOrder.html",
		});
	}
	//新建地址
	function addAdress(){
		mui.openWindow({url:"userAddres.html",});
	}
</script>
